<template>
<div id="app">
  <transition name="fade" mode="out-in">
    <router-view />
  </transition>
  <context-menu :contextMenuData="contextMenuData"></context-menu>
</div>
</template>

<script>
import ContextMenu from '@ct/ContextMenu'
import {
  mapGetters
} from 'vuex'
export default {
  name: 'app',
  components: {
    ContextMenu
  },
  computed: {
    ...mapGetters({
      contextMenuData: 'contextMenuData'
    })
  }
}
</script>

<style lang="scss">
#app {
    width: 100%;
    height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    background-color: #f5f5f5;
}
.fade-enter-active,
.fade-leave-active {
    transition: all 0.2s ease;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}
</style>
